import {Meta, Subtitle, Title, Canvas, Controls, Description, Stories, Markdown} from "@storybook/blocks";
import * as TabsStories from './Tabs.stories'

<Meta of={TabsStories} />

<Title />

<Subtitle />
[Component reference on primevue](https://primevue.org/tabs/)

## Import

```ts
import Tabs from 'primevue/tabs';
import TabList from 'primevue/tablist';
import Tab from 'primevue/tab';
import TabPanels from 'primevue/tabpanels';
import TabPanel from 'primevue/tabpanel';
```

## Playground

{/* Make sure your stories file has an export for playground, otherwise storybook will break */}

<Canvas of={TabsStories.Playground} sourceState="shown" />
<Controls of={TabsStories.Playground} />

[//]: # (## How to use)

[//]: # ()
[//]: # ({/* Add a note here about the relevant props to change appearance of component */})


<Description of={TabsStories} />

<Stories title='' includePrimary={false} />


## Accessibility

### Screen Reader
The tabs container in TabList is defined with the `tablist` role, as any attribute is passed to the container element `aria-labelledby` can be optionally used to specify an element to describe the Tabs. Each Tab has a `tab` role along with `aria-selected` state attribute and `aria-controls` to refer to the corresponding TabPanel. TabPanel has `tabpanel` role, an id to match the `aria-controls` of Tab and `aria-labelledby` reference to Tab as the accessible name.

### Keyboard Navigation

<Markdown>
    {`
| Key         | Function                                                     |
|-------------|--------------------------------------------------------------|
| tab         | Moves focus through the header.                              |
| enter       | Activates the focused tab header.                            |
| space       | Activates the focused tab header.                            |
| right arrow | Moves focus to the next header. If focus is on the last header, moves focus to the first header. |
| left arrow  | Moves focus to the previous header. If focus is on the first header, moves focus to the last header. |
| home        | Moves focus to the last header.                              |
| end         | Moves focus to the first header.                             |
| pageUp      | Moves scroll position to first header.                       |
| pageDown    | Moves scroll position to last header.                        |

`}
</Markdown>